<template>
  <div class="bg">
    <div class="menu-item" v-for="(item, index) in list" :key="item" @click="onTabClick(index)">
        {{ item }}
    </div>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router';
import { queryTwins, showTwinsPoi, hideTwinsPoi, showTwinsPanel, hideTwinsPanel, queryInstance,showInstancePoi, hideInstancePoi, flyToInstance, queryViewList, flyToScene } from '@/ssp'
import { toRaw } from 'vue';
const { proxy } = getCurrentInstance();
const emit = defineEmits()

const list = ref([
    '查询孪生体',
    '显示孪生体POI',
    '隐藏孪生体POI',
    '显示孪生体面板',
    '隐藏孪生体面板',
    '查询孪生体实例列表',
    '查询视角列表',
])

const twins = ref([])
const twinsInstance = ref([])
const views = ref([])
// proxy 替代 this
/**
* 路由对象
*/
const route = useRoute();
/**
* 路由实例
*/
const router = useRouter();
onMounted(() => {
})

const onTabClick = async (index)=>{

    switch (index) {
        case 0:
            {
                twins.value = await queryTwins()
                emit('twinsChange', twins.value)
            }
        break;
        case 1:
            {
                twins.value.forEach(item => {
                    showTwinsPoi(item.twins_id)
                })
            }
        break;
        case 2:
            {
                twins.value.forEach(item => {
                    hideTwinsPoi(item.twins_id)
                })
            }
        break;
        case 3:
            {
                twins.value.forEach(item => {
                    showTwinsPanel(item.twins_id)
                })
            }
        break;
        case 4:
            {
                twins.value.forEach(item => {
                    hideTwinsPanel(item.twins_id)
                })
            }
        break;
        case 5:
            {
                const { rows } = await queryInstance()
                twinsInstance.value = rows
                emit('twinsInstanceChange', rows)
            }
        break;
        case 6:
            {
                views.value = await queryViewList()
                emit('viewsChange', views.value)
                // console.log('views.value====', toRaw(views.value))
            }
        break;
        
        default:
        break;
    }
}

</script>
<style scoped lang='scss'>
.bg{
    display: flex;
    flex-direction: column;
    margin-top: 30px;
    .menu-item{
        color: #fff;
        margin: 20px;
        cursor: pointer;
    }
}
</style>